<template>
  <section>
    <div>
      <indication :indicationData="indicationData"></indication>
    </div>
    <div class="grid_12 vedio-play">
      <div class="play-title">
        <div><span>{{obtainVedioTitle}}</span></div>
      </div>
      <div class="play-content-panel play-content">
        <div class="grid_9 alpha ">
          <video-player class="vjs-custom-skin"
                        ref="videoPlayer"
                        :options="playerOptions"
                        :playsinline="true"
                        @play="onPlayerPlay($event)"
                        @pause="onPlayerPause($event)"
                        @ended="onPlayerEnded($event)"
                        @loadeddata="onPlayerLoadeddata($event)"
                        @waiting="onPlayerWaiting($event)"
                        @playing="onPlayerPlaying($event)"
                        @timeupdate="onPlayerTimeupdate($event)"
                        @canplay="onPlayerCanplay($event)"
                        @canplaythrough="onPlayerCanplaythrough($event)"
                        @ready="playerReadied"
                        @statechanged="playerStateChanged($event)">
          </video-player>
        </div>
        <div class="grid_3 omega play-info-panel">
          <div class="float-info-panel">
            <span class="info-mutable">{{vedio.subject.subjectName}}</span>
            <div class="float-info-panel-img">
              <div :style="{width: '100px', height: '78px', background: 'url(../../static/images/星空背景长图.png) no-repeat '+(-vedio.subject.hPos)+'px '+(-vedio.subject.vPos)+'px'}"></div>
            </div>
          </div>
          <div class="play-info">
            <p class="course-desc"><span>专题描述</span></p>
            <span class="info-mutable">{{vedio.subject.subjectDesc}}</span>
          </div>
          <hr class="line"/>
          <div class="catalogue">
            <span>视频列表</span>
          </div>
          <hr class="line"/>
          <div class="catalogue-content">
            <ul>
              <li v-for="(item, index) in vedio.vedioList" :key="index" class="chapter-item">
                <a @click="playSelectedVedio(index)">
                  <i :class="[isShow===index? 'cur-vedio-show': '', 'fa', isShow===index? 'fa-pause-circle fa-spin': 'fa-play-circle', 'chapter-item-icon']"></i>
                  <span :class="[isShow===index? 'cur-vedio-show': '']">{{item.title}}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </section>
</template>

<script>
// require styles
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import indication from './common/Indication'
import axios from '../../node_modules/axios/dist/axios'

export default {
  data () {
    return {
      indicationData: [
        {name: '视频', path: '/vediolist'},
        {name: '专题', path: `/vediodetail/${this.$route.params.subjectName}`}
      ],
      playerOptions: {
        width: '700px',
        autoplay: false,
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        techCanOverridePoster: true
      },
      vedio: {
        vedioUrlList: [],
        vedioList: [],
        subject: {},
        current: 0
      }
    }
  },
  mounted () {
    this.initVedioPage()
  },
  components: {
    videoPlayer,
    indication
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    },
    isShow () {
      return this.vedio.current
    },
    obtainVedioTitle () {
      let title = ''
      if (this.vedio.vedioList.length !== 0) {
        let currentVedio = this.vedio.vedioList[this.vedio.current]
        title = `${currentVedio.title} - ${currentVedio.desc}`
      }
      return title
    }
  },
  methods: {
    refresh () {
      this.$router.push(`/vediodetail/${this.$route.params.subjectName}`)
    },
    initVedioPage () {
      let _this = this
      axios.get('/vedioList/getSingleSubject',
        {params: {subjectName: this.$route.query.subjectName, subjectType: this.$route.query.subjectType, vedioId: this.$route.query.vedioId}})
        .then(function (res) {
          if (res.data.status === 200) {
            _this.vedio.subject = res.data.datas.subject
            _this.vedio.vedioList = res.data.datas.vedioList
            _this.vedio.vedioUrlList = _this.obtainVedioList(res.data.datas.vedioList)
            // 设置第一个视频播放地址
            if (_this.vedio.vedioUrlList.length !== 0) {
              _this.vedio.current = _this.$route.query.vedioId ? _this._.findIndex(_this.vedio.vedioList, ['id', _this.$route.query.vedioId]) : 0
              let temp = _this._.clone(_this.vedio.vedioUrlList[_this.vedio.current])
              temp.src = res.data.datas.translate
              _this.$refs.videoPlayer.player.src(temp)
            }
            _this.player.muted(false)
          }
        })
    },
    obtainVedioList (vedioList) {
      let result = []
      vedioList.forEach(function (vedio) {
        result.push({src: vedio.vedioUrl, type: 'video/mp4'})
      })
      return result
    },
    playSelectedVedio (index) {
      this.vedio.current = index
      let player = this.$refs.videoPlayer.player
      let temp = this.vedio.vedioUrlList[this.vedio.current]
      let _this = this
      axios.get('/vedioList/ranslateVedioUrl', {params: {translate: temp.src}}).then(function (res) {
        if (res.data.status === 200) {
          temp = _this._.clone(temp)
          temp.src = res.data.datas.url
          player.src(temp)
          player.load()
          player.play()
        }
      })
    },
    // listen event
    onPlayerPlay (player) {
    },
    onPlayerPause (player) {

      // console.log('player pause!', player)
    },
    onPlayerEnded (player) {
      this.vedio.current = (++this.vedio.current) % this.vedio.vedioUrlList.length
      let temp = this.vedio.vedioUrlList[this.vedio.current]
      let _this = this
      axios.get('/vedioList/ranslateVedioUrl', {params: {translate: temp.src}}).then(function (res) {
        if (res.data.status === 200) {
          temp = _this._.clone(temp)
          temp.src = res.data.datas.url
          player.src(temp)
          player.load()
          player.play()
        }
      })
    },
    onPlayerLoadeddata (player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting (player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying (player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate (player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay (player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough (player) {
      // console.log('player Canplaythrough!', player)
    },
    // or listen state event
    playerStateChanged (playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },
    // player is ready
    playerReadied (player) {

    }
  }
}
</script>

<style scoped>
@import '../assets/css/vediodetail.css';
.cur-vedio-show {
  font-size: 16px;
  color: lightblue;
}
</style>
